<template>
	<view class="index-input">
		<u-popup v-model="show" mode="center" height="900upx" width="638upx" border-radius="10" :closeable="true" :borderBottom="false" close-icon-color="#0081F1">
			<view style="padding: 3%">
				<view class="font-30" style="color: #333333;">筛选</view>
				<u-line color="#DCDCDC" margin="20upx 10upx" />
				<view class="font-26" style="margin-top: 20upx;margin-left: 30upx;">分发时间：</view>
				<view style="display: flex;margin-top: 19upx;" @click="getChick">
					<view class="time">2021.04.13 13:09</view> <text style="position: relative;left: 10upx;top:5upx">-</text><view class="time">2021.04.13 13:09</view>
				</view>
				<u-picker v-model="showTime" mode="time" :params="params"></u-picker>
				<u-field style="font-size: 26upx;" v-model="mobile" label="学员ID：" placeholder="请输入"></u-field>
				<u-field style="font-size: 26upx;" v-model="mobile" label="联系方式：" placeholder="请输入"></u-field>
				<u-field style="font-size: 26upx;" v-model="mobile" label="录单人：" placeholder="请输入"></u-field>
				<u-field style="font-size: 26upx;" v-model="name" label="意向课程：" placeholder="请输入" @click="showLess = true"></u-field>
				<u-picker mode="multiSelector" v-model="showLess" :range="multiSelector"></u-picker>
				<u-field style="font-size: 26upx;" v-model="city" label="城市：" placeholder="请输入" @click="showCity = true"></u-field>
				<u-picker mode="region" v-model="showCity" @confirm="getChickValue"></u-picker>
				<view class="font-26" style="margin-left: 25upx;">分发机制：</view>
				<view style="display: flex;margin-left: 15upx;margin-top: 10upx;">
					<view :class="oneFs == '1' ? 'btn-ff' : 'btn'" @click="oneFs = '1'">首次分发</view>
					<view :class="oneFs == '2' ? 'btn-ff' : 'btn'" @click="oneFs = '2'">二次分发</view>
					<view :class="oneFs == '3' ? 'btn-ff' : 'btn'" @click="oneFs = '3'">三次分发</view>
				</view>
				<view class="font-26" style="margin-left: 25upx;margin-top: 10upx;">状态：</view>
				<view style="display: flex;margin-left: 15upx;margin-top: 10upx;">
					<view :class="onecl == '1' ? 'btn-ff' : 'btn'" @click="onecl = '1'">待处理</view>
					<view :class="onecl == '2' ? 'btn-ff' : 'btn'" @click="onecl = '2'">待处理</view>
					<view :class="onecl == '3' ? 'btn-ff' : 'btn'" @click="onecl = '3'">待处理</view>
				</view>
				<view></view>
				<view style="display: flex;justify-content: space-around;margin-top: 20upx;">
					<view class="last" style="background-color: rgb(238,238,238);color: #999999;">重置条件</view>
					<view class="last" style="background-color: rgb(0,129,241);color: #FFFFFF;">确认</view>
				</view>
			</view>
			</u-popup>
							<!-- > -->
		</u-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				onecl: '1',
				oneFs: '1',
				showTime: false,
				show: false,
				showCity: false,
				showLess: false,
				city: '',
				mobile: '请输入',
				name: '语言培训-通用英语-成人新概念英语',
				multiSelector: [
					['语言培训'], 
					['通用英语'],
					['成人新概念英语']
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				}
			}
		},
		methods:{
			getChickValue (value) {
				console.log(value)
				this.city = value.province.label + '-' + value.city.label + '-' + value.area.label
			},
			getOpen (){
				this.show = true
			},
			getChick(){
				this.showTime = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.last{
		width: 240upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 10upx;
	}
	.btn{
		width: 125upx;
		height: 49upx;
		background: rgba(220, 234, 251, 0.3);
		border-radius: 8upx;
		text-align: center;
		line-height: 49upx;
		font-size: 26upx;
		margin-left: 10upx;
	}
	.btn-ff{
		width: 125upx;
		height: 49upx;
		background: rgba(0, 129, 241, 1);
		border-radius: 8upx;
		text-align: center;
		line-height: 49upx;
		font-size: 26upx;
		margin-left: 10upx;
		color: #FFFFFF;
	}
	.font-30{
		font-size: 30upx;
		font-weight: bold;
	}
	.font-26{
		font-size: 26upx;
	}
	.time{
		width: 260upx;
		height: 54upx;
		border: 1upx solid #DCDCDC;
		text-align: center;
		line-height: 54upx;
		margin-left: 25upx;
	}
</style>
